import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import {Button, Pagination, Modal, Form, Input, message, Icon, Select} from "antd";

class EducationalTraining extends Component {
    constructor(props) {
        super(props);

        this.state = {visible: false}
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    onChange(a, b) {
        alert("第" + a + "页，每页数据是" + b + "条");
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // message.success('Received values of form: ', values.DISCIPLINE);
                message.info(`Click on item ${values.DISCIPLINE}`);
                console.log(values);
            }
        });
    };

    render() {
        const Option = Select.Option;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 3},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 21},
            },
        };

        return (
            <div>
                <div className="association-news education-training after-line-set">
                    <h4 className="after-line"><span><b>培训科目</b></span></h4>

                    <div className="clearfix mrt20">
                        <div className="col-md-6 clear-pdl">
                            <div className="well">
                                <div className="media">
                                    <div className="media-left">
                                        <img className="media-object" src="http://temp.im/180x180" alt="..."/>
                                    </div>
                                    <div className="media-body">
                                        <h4 className="media-heading"><NavLink to={{
                                            pathname: '/educational/educational_training',
                                            state: {id: "上海市发展和改革委员会关于价格的通知"}
                                        }}>API570管道检验师IPC培训</NavLink></h4>
                                        <p>培训地址：上海市中兴路960号4号楼</p>
                                        <p>培训时间：2018-12-25~2019-12-25</p>
                                        <p>培训课时：20~24课时</p>
                                        <div>
                                            <Button className="mrr20 btn-warning" onClick={this.showModal}>报名培训</Button>
                                            <Button type="primary"><NavLink exact to="/score_inquiry">成绩查询</NavLink></Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-md-6 clear-pdr">
                            <div className="well">
                                <div className="media">
                                    <div className="media-left">
                                        <img className="media-object" src="http://temp.im/180x180" alt="..."/>
                                    </div>
                                    <div className="media-body">
                                        <h4 className="media-heading">API570管道检验师IPC培训</h4>
                                        <p>培训地址：上海市中兴路960号4号楼</p>
                                        <p>培训时间：2018-12-25~2019-12-25</p>
                                        <p>培训课时：20~24课时</p>
                                        <div>
                                            <Button className="mrr20" disabled>已经结束</Button>
                                            <Button type="primary">成绩查询</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr className="clear-mrt"/>
                    <Pagination  className="text-center mrb30" defaultCurrent={6} onChange={this.onChange} total={500}/>
                </div>

                <Modal
                    destroyOnClose={true}
                    visible={this.state.visible}
                    bodyStyle={{padding: "24px 60px"}}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>取消操作</Button>,
                        <Button key="submit" htmlType='submit' type="primary" onClick={this.handleSubmit}>
                            确认提交
                        </Button>]}>

                    <h3 className="text-center color1 clear-mrt">报名培训</h3>
                    <h5 className="mrt30 color1">培训科目：API570管道检验师ICP培训</h5>
                    <Form onSubmit={this.handleSubmit} className="set-input-pad">
                        <Form.Item>
                            {
                                getFieldDecorator('IDCARD', {
                                    initialValue: '',
                                    rules: [
                                        {
                                            required: true,
                                            message: '身份证号不能为空'
                                        },
                                        // {
                                        //     min: 5, max: 10,
                                        //     message: '长度不在范围内'
                                        // },
                                        // {
                                        //     pattern: new RegExp('^\\w+$', 'g'),
                                        //     message: '用户名必须为字母或者数字'
                                        // }
                                    ]
                                })(<Input prefix={<Icon type="idcard"/>} placeholder="请输入您的身份证号码"/>)
                            }
                        </Form.Item>

                        <Form.Item>
                            {
                                getFieldDecorator('NAME', {
                                    initialValue: '',
                                    rules: [{
                                        required: true,
                                        message: '姓名'
                                    },]
                                })(<Input prefix={<Icon type="user"/>} placeholder="姓名"/>)
                            }
                        </Form.Item>

                        <Form.Item>
                            {
                                getFieldDecorator('PHONE', {
                                    initialValue: '',
                                    rules: [{
                                        required: true,
                                        message: '手机号码不能为空'
                                    },]
                                })(<Input prefix={<Icon type="phone"/>} placeholder="请输入考试报名手机号码"/>)
                            }
                        </Form.Item>

                        <Form.Item>
                            {
                                getFieldDecorator('EMAIL', {
                                    initialValue: '',
                                    rules: [{
                                        required: true,
                                        message: '邮箱'
                                    },]
                                })(<Input prefix={<Icon type="mail"/>} placeholder="邮箱"/>)
                            }
                        </Form.Item>

                        <Form.Item {...formItemLayout} label="学历：">
                            {
                                getFieldDecorator('DISCIPLINE')(<Select placeholder="--请选择您的学历--">
                                    <Option value="jack">Jack</Option>
                                    <Option value="lucy">Lucy</Option>
                                    <Option value="Yiminghe">yiminghe</Option>
                                </Select>)
                            }
                        </Form.Item>
                        <div className="text-danger">
                            <small>注意：以上信息请认真填写。
                            </small>
                        </div>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default Form.create()(EducationalTraining);
